<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <div class="row">
            <div class="space-6"></div>
            <div id="main1" class="col-sm-4" style="height:400px">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <td>月份</td>
                        <td>水电费</td>
                        <td>伙食费</td>
                        <td>交通费</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>一月</td>
                        <td><div contenteditable="true">300</div></td>
                        <td>500</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>二月</td>
                        <td>350</td>
                        <td>450</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>三月</td>
                        <td>300</td>
                        <td>500</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>四月</td>
                        <td>450</td>
                        <td>450</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>五月</td>
                        <td>400</td>
                        <td>400</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>六月</td>
                        <td>500</td>
                        <td>450</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td>七月</td>
                        <td>450</td>
                        <td>450</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>八月</td>
                        <td>400</td>
                        <td>500</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>九月</td>
                        <td>400</td>
                        <td>500</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>十月</td>
                        <td>450</td>
                        <td>400</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td>十一月</td>
                        <td>400</td>
                        <td>450</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>十二月</td>
                        <td>400</td>
                        <td>500</td>
                        <td>250</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="main2" class="col-sm-8" style="height:400px"></div>
            <div class="space-6"></div>
            <div id="main" class="col-sm-6" style="height:400px"></div>
        </div><!-- /row -->
        <div class="hr hr32 hr-dotted"></div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<script src="${ctx}/assets/js/echarts/echarts.js"></script>
<script type="text/javascript">
    require.config({
        paths : {
            echarts : '${ctx}/assets/js/echarts'
        }
    });
    require([ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
    ], function(ec) {
        var myChart = ec.init(document.getElementById('main2'));
        var idx = 1;
        var option = {
            timeline : {
                data : [
                    '2013-01', '2013-02', '2013-03', '2013-04', '2013-05',
                    '2013-06', '2013-07', '2013-08', '2013-09', '2013-10',
                    '2013-11', '2013-12'
                ],
                label : {
                    formatter : function(s) {
                        return s;
                    }
                }
            },
            options : [
                {
                    title : {
                        text: '浏览器占比变化'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        data:['水电费','伙食费','交通费']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            restore : {show: true}
                        }
                    },
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            center: ['50%', '45%'],
                            radius: '50%',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                },
                {
                    series : [
                        {
                            name:'浏览器（数据纯属虚构）',
                            type:'pie',
                            data:[
                                {value: idx * 128 + 80,  name:'Chrome'},
                                {value: idx * 64  + 160,  name:'Firefox'},
                                {value: idx * 32  + 320,  name:'Safari'},
                            ]
                        }
                    ]
                }
            ]
        };
        myChart.setOption(option);
    });
</script>
</body>
</html>
